<template>
  <div class="card-container">
    <div class="info-title">
      订单信息
    </div>
    <div class="info-card">
      <div class="info-card-left">
        <div>订单编号</div>
        <div>下单时间</div>
        <div>订单状态</div>
      </div>
      <div class="info-card-right">
        <div>{{orderInfo.billlcode || ''}}</div>
        <div>{{timeText}}</div>
        <div>{{statusText}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { ORDER_STATUS } from './constants';

export default {
  name: 'orderInfo',
  props: ['orderInfo'],
  data() {
    return {};
  },
  computed: {
    statusText() {
      return ORDER_STATUS[ this.orderInfo.status ] || '未知状态';
    },
    timeText() {
      return this.$moment(this.orderInfo.createTime).format('YYYY.MM.DD HH:mm:ss')
    }
  },
  created: function () {
    console.log(this.props);
  },
  methods: {}
};
</script>

<style scoped lang="scss">
  .card-container {
    width: 100%;
    padding: 0;
    overflow: hidden;
    margin-bottom: 24px;
    text-align: left;

    .info-title {
      margin-bottom: 11px;
      font-size: 28px;
      color: #cfcfd0;
    }

    .info-card {
      width: 100%;
      padding: 21px 19px;
      box-sizing: border-box;
      background: rgba(0, 0, 0, .4);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: left;
      * {
        color: #ffffff;
      }

      .info-card-left, .info-card-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: left;
        font-size: 24px;
        >div:nth-last-child(n+2) {
          margin-bottom: 21px;
        }
      }
      .info-card-left {
        margin-right: 48px;
      }
    }
  }
</style>
